let box = document.querySelector(".box");
let imgBoxUl = box.querySelector(".img_box > ul");
let arrow_right = document.querySelector(".arrow_right")
let timer;

// 动态生成图片(第一张和最后一张)
// console.log(imgBoxUl.firstElementChild.cloneNode(true));
// console.log(imgBoxUl.lastElementChild.cloneNode(true));
// 插入克隆的第一张图片到最后一张图片之后的位置
imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
// 插入克隆的第四张图片到第一张之前的位置
imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild);
// 初始化下标
let index = 1;
// 获取上一个操作的index
let lastIndex = 1;
// 移动到原来第一张图片的位置
imgBoxUl.style.transform = `translateX(-${index}00%)`;
setTimeout(function () {
    imgBoxUl.style.transition = "0.2s ease-in-out";
}, 300);
let flag = true; // 设置开关, 默认可以打开



// 事件代理
box.addEventListener("click", function (event) {
    // 左箭头
    (event.target.className == "arrow_left") && arrowLeftFn(event.target);
    // 右箭头
    (event.target.className == "arrow_right") && arrowRightFn(event.target);
    // 小圆点
    (event.target.classList.contains("dot")) && dotFn(event.target);
});

// 点击右箭头事件
function arrowRightFn(target) {
    if (flag) {
        flagFn();
        imgBoxUl.style.transform = `translateX(-${++index}00%)`;
        // 判断是否到达最后一张
        limit(imgBoxUl.children.length - 1, 1);
        // 获取具体span标签
        let rBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
        dotColor(rBtnEvent);
    }
}

// 点击左箭头事件
function arrowLeftFn(target) {
    if (flag) {
        flagFn();
        imgBoxUl.style.transform = `translateX(-${--index}00%)`;
        // 判断是否是第一张
        limit(0, imgBoxUl.children.length - 2);
        // 获取具体span标签
        let lBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
        dotColor(lBtnEvent);
    }
};

// 临界点跳转图片
function limit(limitIndex, setIndex) {
    // limitIndex 设置限制下标
    // setIndex   设置对于下标
    if (index == limitIndex) {
        index = setIndex;
        imgBoxUl.addEventListener("transitionend", function () {
            // 清除过渡效果, 并且ul恢复位置
            imgBoxUl.style.transition = "none";
            imgBoxUl.style.transform = `translateX(-${index}00%)`;

            // 恢复过渡效果
            // 获取最终样式(被计算的样式)
            window.getComputedStyle(imgBoxUl, "style").getPropertyValue("transition-duration");
            imgBoxUl.style.transition = "0.2s ease-in-out";
        })
    }
}

// 小圆点点击事件
function dotFn(target) {
    // 获取自定义属性的值，这个值可以和index对应
    
    let dataIndex = target.getAttribute("data-index");
    // 操作的值重新赋值到index，那么index就可以更新
    index = dataIndex;
    imgBoxUl.style.transform = `translateX(-${index}00%)`;
    // 调用小圆点颜色函数
    
    dotColor(target);
    
};

// 封装小圆点颜色变化函数
function dotColor(tag) {
    // console.log(tag);
    tag.parentElement.children[lastIndex - 1].classList.remove("dotActive");
    tag.classList.add("dotActive");
    // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
    lastIndex = index;
};

// 控制开关
function flagFn() {
    // 关闭开关
    flag = false;
    imgBoxUl.addEventListener("transitionend", function () {
        flag = true;
    });
}



// 定时器
timeFn();
function timeFn() {
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(function () {
        arrowRightFn(arrow_right);
    }, 2000);
}

// 鼠标移入box区域，停止定时器
box.addEventListener("mouseenter", function () {
    clearInterval(timer);
});
// 鼠标移出box区域，开始定时器
box.addEventListener("mouseleave", function () {
    setTimeout(timeFn, 2000)
});

// 检测页面是否切换，切换就停止定时器
window.addEventListener("visibilitychange", function () {
    if (document.hidden) {
        clearInterval(timer);
    } else {
        timeFn();
    }
});